<%--
  Created by IntelliJ IDEA.
  User: 86151
  Date: 2022/10/31
  Time: 16:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>List</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/layui.css" media="all">
    </head>
<body>
<br>
<div style="font-size: 25px;font-weight: bold">供应商基本信息</div>
<br>
<hr>
<div>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">供应商名称</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="supName" id="supName" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" onclick="history.back()">返回</button
                </div>
            </div>
        </div>
    </form>
    <table class="layui-hide" id="test"  lay-filter="test"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal"  lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal"  lay-event="view2">查看2</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<div    id="view" >
    <p id="p1"></p>
    <p id="p2"></p>
    <p id="p3"></p>
    <p id="p4"></p>
    <p id="p5"></p>
    <p id="p6"></p>
    <p id="p7"></p>
    <img id="p8"/>
</div>
<script src="${pageContext.request.contextPath}/statics/layui/layui.js" charset="utf-8"></script>

<script>
    layui.use(['table','form',"jquery"], function(){
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        var tableIns = table.render({
            elem: '#test'
            ,url: 'http://localhost:8080/springmvc_demo_war_exploded/supplier/list'
            ,toolbar: "#toolbarDemo"
            ,cols: [[
                {field:'id', width:80, title: '编号'}
                ,{field:'supCode', width:180, title: '供应商编号'}
                ,{field:'supName', width:180, title: '供应商名称'}
                ,{field:'supDesc', width:180, title: '描述'}
                ,{field:'supContact', title: '联系人', width: 100}
                ,{field:'supPhone', width:180, title: '电话'}
                ,{field:'supAddress', width:180, title: '地址'}
                ,{fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
            ]]
            ,page: true
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            console.log(data.field)
            //这里以搜索为例
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    supName: data.field.supName
                    //…
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });

        // 工具栏事件
        table.on('toolbar(test)', function(obj){
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch(obj.event) {
                case 'add':
                    window.open('toSupplierAdd');
                    break;
            };
        });
        //触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'view'){
                window.open("view/"+data.id);
            }else if(obj.event === 'view2'){
                $.get("view/"+data.id,function (data) {
                    if (data==="1") {
                        $('#p1').text("编号",data.id);
                        $('#p2').text("供应商编号",data.supCode);
                        $('#p3').text("供应商名称",data.supName);
                        $('#p4').text("描述",data.supDesc);
                        $('#p5').text("联系人",data.supContact);
                        $('#p6').text("电话",data.supPhone);
                        $('#p7').text("地址",data.supAddress);
                        $('#p8').attr({"src":"${pageContext.request.contextPath}/statics/upload/"+data.idpicpath,"width":"100px","height":"120px","value":"证件照："});
                    }
                });
            }else if(obj.event === 'edit'){
                window.open("toEdit/"+data.id);
            }else if(obj.event === 'del'){
                layer.confirm("真的删除行吗",function (index){
                    $.get('${pageContext.request.contextPath}/supplier/delete/'+data.id,function (data) {
                        layer.close(index);
                        if (data==="1"){
                            alert("删除成功");
                            location.reload();
                        }else {
                            alert("删除失败");
                        }
                    })
                })
            }
        });

    });


</script>

</body>
</html>